<template>
  <transition name="slide">
      <div class="login">
          <div class="header-wrapper">
              <i class="iconfont icon-fanhui return" @click="back"></i>
              登录
          </div>
          <div class="content-wrapper">
              <p class="title">发现<span>福利</span>游戏 · 分享简单<span>快乐</span></p>
              <form action="">
                  <div class="item-input">
                      <i class="iconfont icon-user icon"></i>
                      <input type="text" placeholder="请输入用户名" v-model="queryUser">
                      <i class="iconfont icon-icon-cross-empty delete" v-show="queryUser" @click="clearUser"></i>
                  </div>
                  <div class="item-input">
                      <i class="iconfont icon-mima icon"></i>
                      <input type="text" placeholder="请输入密码" v-model="queryPws">
                       <i class="iconfont icon-icon-cross-empty delete" v-show="queryPws" @click="clearPws"></i>
                  </div>
                  <button @click="submitForm" type="button">
                      登录
                  </button>
              </form>
          </div>
      </div>
  </transition>
</template>
<script>
    import {mapMutations} from 'Vuex'
    export default{
        data(){
            return{
                queryUser:'',
                queryPws:''
            }
        },
        methods:{
            ...mapMutations({
                set_nickName:'SET_NICKNAME'
            }),
            back(){
                this.$router.back();
            },
            clearUser(){
                this.queryUser="",
                this.queryPws=""
            },
            clearPws(){
                this.queryPws=""
            },
            submitForm(){
                if(this.queryUser==""){
                    alert("请输入用户名");
                }else if(this.queryPws==""){
                    alert("请输入密码");
                }else{
                    alert("提交成功");
                    // localStorage.setItem("userMsg",JSON.stringify(this.queryUser));
                    // this.$store.commit("updateUserInfo",this.queryUser);
                    this.set_nickName({"nickName":this.queryUser});
                    this.$router.push('/');     
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .slide-enter-active, .slide-leave-active{
		 transition: all 0.3s
	}
    .slide-enter, .slide-leave-to{
    transform: translate(100%, 0)
    }
    .login{
        position:fixed;
        top:0;
        bottom:0;
        background:#fff;
        z-index:999;
        width:100%;
        .header-wrapper{
            width:100%;
            height:48px;
            line-height:48px;
            background:#000;
            color:#fff;
            text-align:center;
            position:relative;
            .return{
                position:absolute;
                left:0;
                top:0;
                height:100%;
                line-height:48px;
            }
            i{
                color:#fff;
                font-size:20px;
                padding:0 20px;
            }
        }
        .content-wrapper{
            .title{
                width:100%;
                font-size:20px;
                letter-spacing:4px;
                 text-align:center;
                 color:#999;
                span{
                    font-size:26px;
                    color:orange;
                }
            }
            form{
                margin-top:40px;
                .item-input{
                    width:80%;
                    margin:0 auto;
                    height:40px;
                    line-height:40px;
                    border:2px solid orange;
                    border-radius:20px;
                    margin-bottom:30px;
                    position:relative;
                    input{
                        width:100%;
                        padding:0 40px;
                        border:none;
                        line-height:26px;
                        box-sizing:border-box;
                        outline:none;
                        margin:0;
                        border-radius:50%;
                    }
                    i{
                        position:absolute;
                        top:0;
                        width:40px;
                        height:40px;
                        line-height:40px;
                        text-align:center;
                        color:orange;
                    }
                    .icon{
                        left:0;
                    }
                    .delete{
                        right:0;
                    }
                }
                button{
                    width:80%;
                    display:block;
                    margin:0 auto;
                    height:40px;
                    line-height:40px;
                    background:orange;
                    border-radius:20px;
                    border:none;
                    outline:none;
                    color:#fff;
                    font-size:14px;
                }
            }
        }
    }
</style>

